<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h3>复选框</h3>
			<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
			<label for="jack">Jack</label>
			<!-- checkbox与label标签同用 -->
			<input type="checkbox" id="john" value="John" v-model="checkedNames">
			<label for="john">John</label>
			<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
			<label for="mike">Mike</label>
			<br>
			<span>Checked names: {{ checkedNames }}</span>
			<hr />
			
			<h3>单选按钮</h3>
			<input type="radio" id="jack" value="Jack" v-model="selectOne">
			<label for="jack">Jack</label>
			<!-- checkbox与label标签同用 -->
			<input type="radio" id="john" value="John" v-model="selectOne">
			<label for="john">John</label>
			<input type="radio" id="mike" value="Mike" v-model="selectOne">
			<label for="mike">Mike</label>
			<br>
			<span>selectOne names: {{ selectOne }}</span>
			<hr />
			
			<h3>选择框</h3>
			<select v-model="selected">
			    <option disabled value="">请选择</option>
			    <option>A</option>
			    <option>B</option>
			    <option>C</option>
			  </select>
			  <span>Selected: {{ selected }}</span>
		</div>
		
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
				new Vue({
				  el: '#app',
				  data: {
				    checkedNames: [],
					selectOne:'',
					selected: ''
				  }
				})
		</script>
	</body>
</html>
